import React from 'react'
import { Modal, Button, Card, Input, Row, Col } from 'antd'
import DescriptionList from 'components/DescriptionList'
import * as config from 'utils/config'

const {Description} = DescriptionList
const Step = ({prev, next, bindUserItem, roleItems}) => {
  const domain = config.DOMAIN
  const html = '<p style="font-size: large">请到oms注册用户</p>\n' +
    `<p><a href=${domain}/security/auth/register>点击此处</a></p>`

  const onNext = () => {
    if (roleItems.length > 0) {
      next()
    }
  }

  /** @namespace bindUserItem.mobile */
  return (
    <div>
      {Object.keys(bindUserItem).length === 0 &&
      <Row type="flex" justify="space-around" gutter={8}>
        <div style={{textAlign: 'center'}} dangerouslySetInnerHTML={{__html: html}}>

        </div>
      </Row>}

      {Object.keys(bindUserItem).length > 0 && <Card bordered={false}>
        <DescriptionList
          title="用户信息"
          size="small"
        >
          <Description term="名字">{bindUserItem.displayName}</Description>
          <Description term="邮箱">{bindUserItem.email}</Description>
          <Description term="电话">{bindUserItem.mobile}</Description>
        </DescriptionList>
      </Card>}

      <Row type="flex" justify="space-around" gutter={8}>
        {<Col>
          <Button onClick={prev}>上一步</Button>
        </Col>}
        {Object.keys(bindUserItem).length > 0 && <Col>
          <Button onClick={onNext}>下一步</Button>
        </Col>}
      </Row>
    </div>
  )
}

export default Step
